<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item.id">
        <img class="s-img" :src="item.coverImage | dalImg" :alt="item.name" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="item in Categories"
        :key="item.id"
        :icon="item.coverImage | dalImg"
        :text="item.name"
      />
    </van-grid>
    <van-divider>热卖商品</van-divider>
    <van-card
      v-for="(item, index) in Products"
      :key="item.id"
      :tag="index + 1 + ''"
      :num="item.amount"
      :price="item.price.toFixed(2)"
      :origin-price="item.price.toFixed(2)"
      :title="item.name"
      :thumb="item.coverImage | dalImg"
      @click="toDetail(item.id)"
    />
  </div>
</template>

<script>
import { loadBannerAPI } from "../services/banner";
import { loadProductCategrories } from "../services/product-categories";
import { loadPrductsAPI } from "../services/producs";
export default {
  name: "Home",
  data() {
    return {
      banners: [],
      Categories: [],
      Products: [],
      product:{}
    };
  },
  async created() {
    const res = await loadBannerAPI();
    const resCategories = await loadProductCategrories();
    const resProducts = await loadPrductsAPI();
    this.banners = res.data;
    this.Categories = resCategories.data;
    this.Products = resProducts.data;
  },
  components: {},
  methods: {
    toDetail(id) {
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.s-img {
  width: 100vw;
  height: 40vw;
}
</style>